<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-form :model="formExp" label-width="120px" :rules="rules" ref="ruleFormRef">
                <el-form-item label="支出名称" prop="type">
                    <el-input v-model.number="formExp.type" placeholder="请输入支出名称" />
                </el-form-item>
                <el-form-item label="支出金额" prop="money">
                    <el-input v-model.number="formExp.money" placeholder="请输入支出金额" />
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item label="微信" prop="wechat">
                            <el-input v-model.number="formExp.wechat" placeholder="微信付款" @change="handleInput()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="支付宝" prop="alipay">
                            <el-input v-model.number="formExp.alipay" placeholder="支付宝付款" @change="handleInput()" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item label="现金" prop="cash" placeholder="现金付款">
                            <el-input v-model.number="formExp.cash" @change="handleInput()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="其他支付" prop="rests" placeholder="其他方式付款">
                            <el-input v-model.number="formExp.rests" @change="handleInput()" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="欠费金额">
                    <el-input v-model.number="formExp.Arrearage" readonly />
                </el-form-item>
                <el-form-item label="支出时间" prop="Exptime">
                    <el-date-picker v-model="formExp.time" type="date" placeholder="请选择支出时间" clearable />
                </el-form-item>
                <el-form-item label="支出备注">
                    <el-input type="textarea" v-model="formExp.descr" placeholder="请输入支出备注内容" />
                </el-form-item>
                <div class="tip-box">
                    请输入各类支付方式，支出金额会自动计算
                </div>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(ruleFormRef)">确认提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ExpenType } from '../../../types/expenditure';
import { ExpenPost } from '../../../api/expenditure';
interface EmitType {
    (agr: 'update:modelValue', bool: boolean): void;
}
const emit = defineEmits<EmitType>()
const ruleFormRef = ref<FormInstance>()
// 创建支出数据
let formExp = reactive({
    type: '',
    money: 0,
    wechat: 0,
    alipay: 0,
    cash: 0,
    rests: 0,
    time: '',
    descr: '',
    state: '未审核',
    Arrearage: 0,
    isExpen: '支出',
})


// 计算支出金额
const handleInput = () => {
    let sum = formExp.alipay + formExp.cash + formExp.wechat + formExp.rests
    if (sum >= 0) {
        formExp.money = sum
        formExp.Arrearage = 0
    } else {
        formExp.money = 0
        formExp.Arrearage = Math.abs(sum)

    }
}

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            await ExpenPost(formExp)
            ElMessage.success('新增成功')
            emit('update:modelValue', false)
        } else {
            ElMessage.error('请输入必选项')
            console.log('error submit!', fields)
        }
    })
}
const rules = reactive<FormRules<ExpenType>>({
    type: [
        { required: true, message: '请输入支出名称', trigger: 'blur' },
    ],
    money: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    wechat: [
        { required: true, message: '微信付款', trigger: 'blur' },
    ],
    alipay: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    cash: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    rests: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    time: [
        { required: true, message: '请选择支出时间', trigger: 'blur' },
    ],


})
</script>

<style scoped>
.tip-box {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 22px;
    border: 1px solid #e6e6e6;
    border-left: 5px solid #5FB878;
    border-radius: 0 2px 2px 0;
    background-color: white;
}
</style>